<template>
  <view :style="themeColor">
    <view class="page">
      <view
        class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex evaluates_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-stretch justify-between evaluates_fd0_0'>
          <view class='flex flex-wrap align-center evaluates_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  evaluates_fd0_0_c0_c0'>&#xe794;</text>
          </view>
          <view class='flex flex-wrap align-center'>
            <text class='evaluates_fd0_0_c1_c0'>{{$t('全部评价')}}</text>
          </view>
          <view class='flex align-center justify-end evaluates_fd0_0_c2'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---全部评论flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout evaluates_flex_1">
        <!--        <view class='flex flex-wrap align-center evaluates_fd1_1'>
        </view> -->
        <template v-for='(item,key0) in dataList'>
          <view class='flex flex-direction flex-wrap align-stretch evaluates_fd1_2' :key='key0'>
            <view class='flex flex-wrap align-start flex-sub evaluates_fd1_2_c0'>
              <image class='evaluates_fd1_2_c0_c0' mode="aspectFill" :src='item.avatar'></image>
              <view class='flex flex-direction flex-wrap align-stretch flex-sub'>
                <view class='flex flex-wrap align-center justify-between evaluates_fd1_2_c0_c1_c0'>
                  <text class='evaluates_fd1_2_c0_c1_c0_c0'>{{item.userName}}</text>
                  <text class='evaluates_fd1_2_c0_c1_c0_c1'>{{item.addTime}}</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <template v-for="starNum in [1,2,3,4,5]">
                    <image v-if="item.evalNum >= starNum" :key="starNum" class='evaluates_star1fd1_2_c0_c1_c1'
                      mode="aspectFit" :src='STATIC_URL+"81.png"'></image>
                    <image v-else :key="starNum" class='evaluates_star1fd1_2_c0_c1_c1' mode="aspectFit"
                      :src='STATIC_URL+"240.png"'></image>
                  </template>
                </view>
              </view>
            </view>
            <text class='evaluates_fd1_2_c1'>{{item.evalRemark}}</text>
            <view class='flex flex-wrap align-center evaluates_fd1_2_c2'>
              <template v-for='(child,key1) in item.evalPicss'>
                <view class='flex flex-wrap align-center evaluates_fd1_2_c2_c0' :key='key1'>
                  <image class='evaluates_fd1_2_c2_c0_c0' mode="aspectFill" :src='child'
                    @tap.stop="multiImagePreview(child,item.thumb,'')"></image>
                </view>
              </template>

            </view>
            <view class='flex align-center evaluates_fd1_2_c3_c'>
              <image class='cover_image' mode="aspectFit" :src='item.coverPic'></image>
              <view class="flex flex-direction align-stretch justify-between margin-left-sm">
                <view class='text-333 text-df'>{{item.comdName}}</view>
                <view class='evaluates_fd1_2_c3_c0'>{{item.propItemName}}</view>
              </view>

            </view>
          </view>
        </template>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---全部评论flex布局结束-->


    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "evaluateID": "all",
        "evaluateLable": "",
        "evaluate": [],
        "dataList": [],
        "dataTbas": [],
        "id": ""
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      }
    },
    watch: {},
    onLoad(options) {
      let {
        id
      } = options
      if (id !== undefined) this.id = id
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getListFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getListFunc()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //点赞
      async dianzanFunc(item) {
        if (this.isLogin == true) {
          let data641ae9cf8abed = await this.$api.post(global.apiUrls.post641ae9cf8abed, {
            gc_id: item.aid,
          })
          if (data641ae9cf8abed.data.code != 1) {
            this.$message.info(data641ae9cf8abed.data.msg)
            return
          }
          //手动更新
          if (item.is_likes) {
            this.$set(item, 'likes_num', --item.likes_num)
          } else {
            this.$set(item, 'likes_num', ++item.likes_num)
          }
          this.$set(item, 'is_likes', !item.is_likes)
        } else {
          uni.showToast({
            title: global.i18n.t('请先登录'),
            mask: true,
            icon: 'none',
            duration: 1500
          });
          this.toLoginDiy();
        }
      },

      //获取评价列表
      getListFunc() {
        this.minixPagingListsApi = global.apiUrls.qryUserEval;
        this.pageingListApiMethod = 'get';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          // goods_id: this.id,
          user_id: this.userInfo.id,
          comdIdk: this.id
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #fff;
    background-size: 100% auto;
  }

  .evaluates_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
    border-bottom: 2rpx solid #EEE;
  }

  .evaluates_fd0_0_c2 {
    padding: 0rpx 0rpx 0rpx 0rpx;
    width: 150rpx;
  }

  .evaluates_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
  }

  .evaluates_fd0_0_c0_c0 {
    font-size: 32rpx;
    color: #333;
  }

  .evaluates_fd0_0_c0 {
    width: 150rpx;
  }

  .evaluates_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .evaluates_flex_1 {
    // padding: 24rpx 0rpx 0rpx 0rpx;
  }

  .evaluates_fd1_2_c3_c0 {
    font-size: 24rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
    line-height: 33rpx;
  }

  .evaluates_fd1_2_c3 {
    border-bottom: 1px solid #eee;
    margin: 8rpx 32rpx 0rpx 32rpx;
    padding: 0rpx 0rpx 32rpx 0rpx;
  }

  .evaluates_fd1_2_c3_c {
    padding: 24rpx;
    background-color: #f8f8f8;
    border-radius: 16rpx;
    width: 710rpx;
    margin: 0 auto;

  }

  .cover_image {
    width: 80rpx;
    height: 80rpx;
    display: block;
  }

  .evaluates_fd1_2_c2_c0_c0 {
    width: 226rpx;
    height: 226rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
  }

  .evaluates_fd1_2_c2_c0 {
    margin: 0rpx 4rpx 24rpx 0rpx;
  }

  .evaluates_fd1_2_c2 {
    margin: 0rpx 0rpx 0rpx 32rpx;
  }

  .evaluates_fd1_2_c1 {
    margin: 0rpx 32rpx 16rpx 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .evaluates_star1fd1_2_c0_c1_c1 {
    height: 18rpx;
    margin: 0rpx 5rpx 0rpx 5rpx;
    width: 18rpx;
  }

  .evaluates_star1fd1_2_c0_c1_c1 {
    width: 18rpx;
    height: 18rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 5rpx 0rpx 5rpx;
  }

  .evaluates_fd1_2_c0_c1_c0_c1 {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .evaluates_fd1_2_c0_c1_c0_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .evaluates_fd1_2_c0_c1_c0 {
    margin: 0rpx 0rpx 8rpx 0rpx;
  }

  .evaluates_fd1_2_c0_c0 {
    width: 56rpx;
    height: 56rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .evaluates_fd1_2_c0 {
    margin: 0rpx 32rpx 24rpx 32rpx;
  }

  .evaluates_fd1_2 {
    padding: 32rpx 0rpx 0rpx 0rpx;
  }

  .evaluates_fd1_1 {
    background: var(--benbenbgColor5);
    background-size: 100% auto !important;
    height: 20rpx;
  }

  .evaluates_fd1_0_c0_c1_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: center;
    line-height: 40rpx;
    margin: 0rpx 0rpx 0rpx 10rpx;
  }

  .evaluates_fd1_0_c0_c1_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: center;
    line-height: 40rpx;
  }

  .evaluates_fd1_0_c0_c1 {
    background: var(--benbenbgColor5);
    margin: 12rpx 8rpx 12rpx 8rpx;
    height: 56rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    padding: 0rpx 25rpx 0rpx 25rpx;
  }

  .evaluates_fd1_0_c0_c0_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor3);
    line-height: 40rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: center;
    margin: 0rpx 0rpx 0rpx 10rpx;
  }

  .evaluates_fd1_0_c0_c0_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor3);
    line-height: 40rpx;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-align: center;
  }

  .evaluates_fd1_0_c0_c0 {
    background: var(--benbenbgColor7);
    margin: 12rpx 8rpx 12rpx 8rpx;
    height: 56rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    padding: 0rpx 25rpx 0rpx 25rpx;
  }

  .evaluates_fd1_0 {
    padding: 0rpx 16rpx 16rpx 16rpx;
  }
</style>
